<template>
    <h1>当前的和为:{{ sum }}</h1>
    <button @click="changeSum">点我+1</button>
</template>

<script setup lang="ts" name="Person">

    /*
        vue3的生命周期:
            创建阶段: setup
            挂载阶段:onBeforeMount、onMounted
            更新阶段:onBeforeUpdate、onUpdated
            卸载阶段:onBeforeUnmount、onUnmounted
    */

    import {ref,
        onBeforeMount,  //挂载前的钩子函数
        onMounted,  //挂载后的钩子函数
        onBeforeUpdate, //修改前的钩子函数
        onUpdated,  //修改后的钩子函数
        onBeforeUnmount,    //销毁前的钩子函数
        onUnmounted //销毁后的钩子函数
    } from 'vue'

    let sum=ref(0);

    function changeSum(){
        sum.value+=1;
    }
    console.log('setup......')
    
    //声明钩子函数
    onBeforeMount(()=>{
        console.log("挂载之前")
    })
    onMounted(()=>{
        console.log("挂载之后")
    })
    onBeforeUpdate(()=>{
        console.log("修改之前")
    })
    onUpdated(()=>{
        console.log("修改之后")
    })
    onBeforeUnmount(()=>{
        console.log("销毁之前")
    })
    onUnmounted(()=>{
        console.log("销毁之后")
    })

</script>


<style scoped>

</style>
